<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()">
    <font style="color: red" class="tipss"></font>
</marquee>
<div class="wrapper wrapper-content">
    <div class="row" id="shouyeInfo">
        <div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">今日</span>
                        <h5今天电话接听数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins info1"></h1>
                    </div>
                    <small></small>
                </div>
            </div>
        </div>

        <div class="col-sm-12" style="padding: 10px 17px;font-size: 26px;font-weight: bold">
            今日外呼数据
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>IM机器人外呼数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins infoss info2"></h1>
                </div>
                <small></small>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>IM平均通话时长</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins infoss info3"></h1>
                </div>
                <small></small>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>IM接通率</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins infoss info4"></h1>
                </div>
                <small></small>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>人工外呼总数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins infoss info5"></h1>
                </div>
                <small></small>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>人工平均通话时长</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins infoss info6"></h1>
                </div>
                <small></small>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今日</span>
                    <h5>人工接通电话数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins infoss info7"></h1>
                </div>
                <small></small>
            </div>
        </div>
    </div>


</div>


<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins" style="padding: 0 10px">
            <div class="ibox-title">
                <h5>通话报表</h5>

            </div>
            <div class="ibox-content">
                <div class="row" style="width:100%;height: 400px">
                    <div class="col-sm-12" style="width:100%;height: 400px">
                        <div class="flot-chart" style="width:100%;height: 400px">
                            <div class="flot-chart-content" id="flot-dashboard-chart" style="width:100%;height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>用户不满意告警列表</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-hover no-margins" id="myList">
                    <thead>
                    <tr>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>电话号码</th>
                        <th>号码归属地</th>
                        <th>客服坐席</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>

<th:block th:include="include :: sparkline-js" />
<script th:src="@{/ajax/libs/report/echarts/echarts-all.min.js?v=4.2.1}"></script>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script type="text/javascript">
    setInterval(function() {
        $("#nav").find("ul").animate({"marginTop":"-20px"},200,function() {
            $(this).css({'marginTop':'0px'}).find("li:first").appendTo(this)
        })
    },2000)
    $(document).ready(function () {
        //获取首页数据

        $.ajax({
            type: "post",
            url: ctx + "system/service/listmyd",
            data: {
            },
            success: function(data) {
                if (data.code == 0) {
                    if (data.code == 0) {

                        console.log(data)
                        if(data.total>0){
                            $(".tipss").text("您有"+data.total+"条告警信息需要处理")
                        }else{
                            $(".tipss").text("暂无告警信息")
                        }
                    }
                    console.log(data)
                    $.each(data.rows, function(index, item) {
                        $('#myList tbody').append(
                            '<tr>' +
                            '<td>' + item.createtime + '</td>' +
                            '<td>' + item.endTime + '</td>' +
                            '<td>' + item.fromnum + '</td>' +
                            '<td>' + item.cname + '</td>' +
                            '<td>' + item.agentid + '</td>' +
                            '</tr>'
                        );
                    });
                } else {
                    $.modal.msg(data.msg);
                }
            }
        });
        $.ajax({
            type: "post",
            url: ctx + "system/shouye/list",
            data: {
            },
            success: function(data) {
                if (data.code == 0) {
                    console.log(data)
                    $('.info1').text(data.rows[0].qJqznwhs)
                    $('.info2').text(data.rows[0].qImwhzs)
                    $('.info3').text(data.rows[0].qImavethsc)
                    $('.info4').text(data.rows[0].qImjtlv)
                    $('.info5').text(data.rows[0].qRgwhzs)
                    $('.info6').text(data.rows[0].qRgavethsc)
                    $('.info7').text(data.rows[0].qRgjtlv)
                    $('.info8').text(data.rows[0].qImtelzxs)
                    $('.info9').text(data.rows[0].qRgtelzxs)
                    $('.info10').text(data.rows[0].qAlert)
                } else {
                    $.modal.msg(data.msg);
                }
            }
        });
        var datax=[];var dataV=[];
        $.ajax({
            type: "post",
            url: ctx + "system/manyi/list",
            data: {
            },
            success: function(data) {
                if (data.code == 0) {
                    console.log(data)
                    for(let i=0;i<data.rows.length;i++){
                        datax.push(data.rows[i].mydName)
                        dataV.push(data.rows[i].hrjtzs)
                    }

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('flot-dashboard-chart'));
                    // 指定图表的配置项和数据
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: datax,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '接通数',
                                type: 'bar',
                                barWidth: '60%',
                                data: dataV,
                                itemStyle: {
                                    // 设置柱状图颜色
                                    color: '#1c84c6'
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                } else {
                    $.modal.msg(data.msg);
                }
            }
        });


        // $.plot($("#flot-dashboard-chart"), dataset, options);
	    });
    </script>
</body>
<style>

    .infoss{
        text-align: right;
        color: #0eb288;
    }
    .info1{
        /*text-align: center;*/
        color: #0eb288;
        font-size: 40px;
        font-weight: bold;
    }
</style>
</html>
